
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>桑基图可视化</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
                background-color: #f5f5f5;
            }
            .container {
                max-width: 1200px;
                margin: 0 auto;
                background-color: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            h1 {
                color: #333;
                text-align: center;
                margin-bottom: 30px;
            }
            #chart {
                width: 100%;
                height: 600px;
            }
            .loading {
                text-align: center;
                padding: 50px;
                color: #666;
            }
            .info {
                margin-top: 20px;
                padding: 15px;
                background-color: #f8f9fa;
                border-radius: 5px;
                border-left: 4px solid #007bff;
            }
        </style>
        </head>
        <body>
        <div class="container">
            <h1>桑基图可视化</h1>
            <div id="chart">
                <div class="loading">正在加载图表...</div>
            </div>
            <div class="info">
                <h3>图表说明：</h3>
                <ul>
                    <li>桑基图展示了数据流的方向和大小</li>
                    <li>节点之间的连线宽度表示流量大小</li>
                    <li>鼠标悬停可查看详细信息</li>
                    <li>支持拖拽节点调整布局</li>
                </ul>
            </div>
        </div>

        <script>
            // 等待页面加载完成
            document.addEventListener('DOMContentLoaded', function() {
                // 检查ECharts是否加载成功
                if (typeof echarts === 'undefined') {
                    document.getElementById('chart').innerHTML = '<div class="loading">ECharts库加载失败，请检查网络连接</div>';
                    return;
                }

                try {
                    // 初始化图表
                    var chartDom = document.getElementById('chart');
                    var myChart = echarts.init(chartDom);

                    var option = {"title": {"text": "桑基图可视化", "left": "center", "textStyle": {"fontSize": 18, "fontWeight": "bold"}}, "tooltip": {"trigger": "item", "triggerOn": "mousemove"}, "series": [{"type": "sankey", "layout": "none", "data": [{"name": "使用流量>1GB"}, {"name": "20250703"}, {"name": "20250706"}, {"name": "20250704"}, {"name": "20250705"}], "links": [{"source": "20250703", "target": "使用流量>1GB", "value": 3}, {"source": "20250704", "target": "使用流量>1GB", "value": 3}, {"source": "20250705", "target": "使用流量>1GB", "value": 1}, {"source": "20250706", "target": "使用流量>1GB", "value": 2}], "itemStyle": {"borderWidth": 1, "borderColor": "#aaa"}, "lineStyle": {"color": "source", "curvature": 0.5}, "emphasis": {"focus": "adjacency"}}]};

                    myChart.setOption(option);

                    // 响应式调整
                    window.addEventListener('resize', function() {
                        myChart.resize();
                    });

                    console.log('桑基图加载成功');
                } catch (error) {
                    console.error('图表初始化失败:', error);
                    document.getElementById('chart').innerHTML = '<div class="loading">图表初始化失败: ' + error.message + '</div>';
                }
            });
        </script>
        </body>
        </html>
        